<template>
  <view class="container" :style="{ height: containerHeight + 'px' }">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <text class="title">工具</text>
      <view-switcher :current-view="viewMode" @switch="switchView" />
    </view>

    <!-- 网格视图 -->
    <scroll-view scroll-y class="content-area" v-if="viewMode === 'grid'">
      <view class="grid-layout">
        <!-- 纪念日 -->
        <tool-card 
          type="anniversary" 
          title="纪念日" 
          :subtitle="`有${stats.anniversaryCount}个重要日子`" 
          @click="navigateTo('anniversary')" 
        />

        <!-- 备忘录 -->
        <tool-card 
          type="memo" 
          title="备忘录" 
          :subtitle="`已写${stats.memoCount}篇备忘`" 
          @click="navigateTo('memo')" 
        />

        <!-- 日记 -->
        <tool-card 
          type="diary" 
          title="日记" 
          :subtitle="`已写${stats.diaryCount}篇日记`" 
          @click="navigateTo('diary')" 
        />

        <!-- 记账 -->
        <tool-card 
          type="accounting" 
          title="记账" 
          :subtitle="`已记账${stats.accountingDays}天`" 
          @click="navigateTo('accounting')" 
        />

        <!-- 课程表 -->
        <tool-card 
          type="schedule" 
          title="课程表" 
          :subtitle="`今天共有${stats.todayClasses}节课`" 
          @click="navigateTo('schedule')" 
        />
      </view>
    </scroll-view>

    <!-- 列表视图 -->
    <scroll-view scroll-y class="content-area" v-if="viewMode === 'list'">
      <view class="list-layout">
        <!-- 纪念日详情 --> 
        <tool-list-item type="anniversary" title="纪念日" @header-click="navigateTo('anniversary')">
          <view class="anniversary-item" v-for="(item, index) in anniversaryList" :key="index">
            <text class="anniversary-name">距 {{item.name}}</text>
            <view class="anniversary-days">
              <text>还有</text>
              <text class="days-number" :style="{color: item.color}">{{item.days}}</text>
              <text>天</text>
            </view>
          </view>
        </tool-list-item>

        <!-- 备忘录详情 -->
        <tool-list-item type="memo" title="备忘录" @header-click="navigateTo('memo')">
          <view class="memo-item" v-for="(item, index) in memoList" :key="index">
            <view class="memo-header">
              <text class="memo-title">{{item.title}}</text>
              <text class="memo-date">{{item.date}}</text>
            </view>
            <text class="memo-content">{{item.content}}</text>
          </view>
        </tool-list-item>

        <!-- 日记详情 -->
        <tool-list-item type="diary" title="日记" @header-click="navigateTo('diary')">
          <view class="diary-item" v-for="(item, index) in diaryList" :key="index">
            <view class="diary-date">
              <text class="diary-day">{{item.day}}</text>
              <text class="diary-month">{{item.month}}</text>
            </view>
            <view class="diary-divider"></view>
            <text class="diary-content">{{item.content}}</text>
          </view>
        </tool-list-item>

        <!-- 记账详情 -->
        <tool-list-item type="accounting" title="记账" @header-click="navigateTo('accounting')">
          <view class="accounting-section">
            <text class="section-title">支出</text>
            <view class="section-divider"></view>
            <view class="accounting-categories">
              <accounting-category 
                v-for="(item, index) in accountingCategories" 
                :key="index"
                :name="item.name"
                :icon="item.icon"
              />
            </view>
            <view class="accounting-info">
              <view class="date-info">
                <text class="date-label">{{currentDate}}</text>
                <text class="date-icon">▼</text>
              </view>
              <text class="amount">{{currentAmount}}</text>
            </view>
          </view>
        </tool-list-item>

        <!-- 课程表详情 -->
        <tool-list-item type="schedule" title="课程表" @header-click="navigateTo('schedule')">
          <view class="schedule-section">
            <week-calendar :days="weekDays" />
            <class-info :class-data="todayClass" />
          </view>
        </tool-list-item>
      </view>
    </scroll-view>
    <bottom-navigation 
      :defaultIndex="1"
      @nav-click="onNavItemClick"
      @fab-click="onFabClick" 
    />
  </view>
</template>

<script>
import ViewSwitcher from '@/components/ViewSwitcher/ViewSwitcher.vue';
import ToolCard from '@/components/ToolCard/ToolCard.vue';
import ToolListItem from '@/components/ToolListItem/ToolListItem.vue';
import AccountingCategory from '@/components/AccountingCategory/AccountingCategory.vue';
import WeekCalendar from '@/components/WeekCalendar/WeekCalendar.vue';
import BottomNavigation from '@/components/BottomNavigation/BottomNavigation.vue';
import ClassInfo from '@/components/ClassInfo/ClassInfo.vue';

export default {
  components: {
    BottomNavigation,
    ViewSwitcher,
    ToolCard,
    ToolListItem,
    WeekCalendar,
    AccountingCategory,
    ClassInfo
  },
  data() {
    return {
      viewMode: "grid", // 'grid' 或 'list'
      stats: {
        anniversaryCount: 21,
        memoCount: 3,
        diaryCount: 1,
        accountingDays: 25,
        todayClasses: 3,
      },
      anniversaryList: [
        { name: "千玺 20岁生日", days: 45, color: "#ff6b81" },
        { name: "2周年 纪念日", days: 62, color: "#ff6b81" },
        { name: "圣诞节 节日", days: 72, color: "#ff6b81" },
      ],
      memoList: [
        {
          title: "关于电影",
          date: "09/22",
          content: "电影推荐《我是马布里》《理查德米勒你的爱歌》",
        },
      ],
      diaryList: [
        {
          day: "14",
          month: "十月",
          content: "已经下了4天雨了，快放晴吧，太冷了",
        },
      ],
      accountingCategories: [
        { name: "一般", icon: "general" },
        { name: "购物", icon: "shopping" },
        { name: "餐饮", icon: "food" },
        { name: "交通", icon: "transport" },
        { name: "住房", icon: "house" },
        { name: "医疗", icon: "medical" },
      ],
      currentDate: "2020/10/06",
      currentAmount: "0.00",
      weekDays: [
        { name: "日", number: "11", isCurrent: false },
        { name: "一", number: "12", isCurrent: false },
        { name: "二", number: "13", isCurrent: false },
        { name: "三", number: "14", isCurrent: true },
        { name: "四", number: "15", isCurrent: false },
        { name: "五", number: "16", isCurrent: false },
        { name: "六", number: "17", isCurrent: false },
      ],
      todayClass: {
        name: "线性代数",
        location: "第1-2节 西实训405",
        time: "08:00-09:00",
      },
	  containerHeight: 0
    }
  },
  mounted() {
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      // 假设底部导航栏高度为80rpx，需根据实际情况调整
      const bottomNavHeight = 80; 
      this.containerHeight = windowHeight - bottomNavHeight;
    },
  methods: {
    switchView(mode) {
      this.viewMode = mode
    },
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/index`,
      })
    },
    onNavItemClick(index) {
      console.log('导航项点击:', this.navItems[index].name);
    },
    onFabClick() {
      console.log('添加新任务');
    }
  },
}
</script>

<style>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  background-color: #F8F8FB;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 增强移动端滚动体验，在支持的浏览器中使用 */
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  background-color: #F8F8FB;
}

.title {
  font-size: 71rpx;
  font-weight: 700;
  line-height: 99.4rpx;
  color: #111111;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 0 30rpx;
  box-sizing: border-box;
}

/* 网格视图样式 */
.grid-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx 0;
}

/* 列表视图样式 */
.list-layout {
  padding: 20rpx 0;
}

/* 纪念日列表样式 */
.anniversary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #EEEEEE;
}

.anniversary-item:last-child {
  border-bottom: none;
}

.anniversary-name {
  font-size: 30rpx;
  color: #666666;
}

.anniversary-days {
  display: flex;
  align-items: center;
}

.anniversary-days text {
  font-size: 28rpx;
  color: #666666;
}

.days-number {
  font-size: 42rpx;
  font-weight: bold;
  margin: 0 10rpx;
}

/* 备忘录列表样式 */
.memo-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #EEEEEE;
}

.memo-item:last-child {
  border-bottom: none;
}

.memo-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.memo-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}

.memo-date {
  font-size: 26rpx;
  color: #999999;
}

.memo-content {
  font-size: 28rpx;
  color: #999999;
  line-height: 1.5;
}

/* 日记列表样式 */
.diary-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
}

.diary-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
}

.diary-day {
  font-size: 42rpx;
  font-weight: bold;
  color: #333333;
}

.diary-month {
  font-size: 26rpx;
  color: #999999;
}

.diary-divider {
  width: 2rpx;
  height: 100rpx;
  background-color: #999999;
  margin: 0 20rpx;
}

.diary-content {
  font-size: 30rpx;
  color: #666666;
  flex: 1;
  line-height: 1.5;
}

/* 记账列表样式 */
.accounting-section {
  padding: 20rpx 0;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.section-divider {
  height: 2rpx;
  background-color: #EEEEEE;
  margin-bottom: 20rpx;
}

.accounting-categories {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.accounting-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #EEEEEE;
}

.date-info {
  display: flex;
  align-items: center;
}

.date-label {
  font-size: 30rpx;
  color: #666666;
  margin-right: 10rpx;
}

.date-icon {
  font-size: 24rpx;
  color: #999999;
}

.amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

/* 课程表列表样式 */
.schedule-section {
  padding: 20rpx 0;
  width: 100%;
}
</style>